<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<!DOCTYPE html>
<html>
<%--提供用户登录的界面，包含用户名、密码和验证码输入框，以及登录按钮。--%>
<%--用户输入信息后，点击登录按钮，表单会提交到后端的 AuthServlet，并附带 action=login 参数。--%>
<%--验证码图片是通过 AuthServlet?action=validationCode 动态生成的。--%>
<%--如果登录失败，后端会通过 alert_msg 返回错误信息，前端通过 JavaScript 弹出提示。--%>
<head>
    <meta charset="utf-8">
    <title>登录</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/jquery-3.5.1.js"></script>
    <script src="js/bootstrap.js"></script>
    <style>
        body {
            padding: 0;
            margin: 0;
            background: url("img/img.png") no-repeat center center fixed;
            background-size: cover;
            font-family: 'Arial', sans-serif;
        }
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .loginBox {
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            padding: 40px;
            width: 400px;
            height: 350px;
        }
        .loginLabel label {
            font-size: 28px;
            font-weight: bold;
            color: #333;
            text-align: center;
            display: block;
            margin-bottom: 20px;
        }
        .form-group label {
            font-weight: bold;
            color: #555;
        }
        .loginBtn button {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            border-radius: 5px;
            background-color: #007BFF;
            border: none;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .loginBtn button:hover {
            background-color: #0056b3;
        }
        .form-inline {
            display: flex;
            align-items: center;
        }
        .form-inline input {
            margin-right: 10px;
        }
        a {
            color: #007BFF;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
    </style>

<%--如果登录失败，后端会通过 alert_msg 返回错误信息，前端通过 JavaScript 弹出提示--%>
    <script type="text/javascript">
        let alert_msg = '${alert_msg}';
        if (alert_msg != null && alert_msg.trim() != '') {
            window.alert(alert_msg);
        }
    </script>



</head>

<body>
<div class="container">
    <div class="loginBox">


      <%-- 用户输入信息后，点击登录按钮，表单会提交到后端的 AuthServlet，并附带 action=login 参数。--%>
        <form class="form-horizontal"
              action="AuthServlet?action=login"
              method="post" onsubmit="return check()">
            <div class="loginLabel">
                <label>服装店门店信息管理系统</label>
            </div>
            <div class="form-group">
                <label for="username" class="col-sm-3 control-label">账号</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="username" name="username" placeholder="请输入您的账号">
                </div>
            </div>
            <div class="form-group">
                <label for="password" class="col-sm-3 control-label">密码</label>
                <div class="col-sm-9">
                    <input type="password" class="form-control" id="password" name="password" placeholder="请输入您的密码">
                </div>
            </div>

            <%--验证码--%>
            <div class="form-group">
                <label for="validationCode" class="col-sm-3 control-label">验证码</label>
                <div class="col-sm-9 form-inline">
                    <%--验证码图片是通过 AuthServlet?action=validationCode 动态生成的。--%>
                    <input type="text" id="validationCode" name="validationCode" class="form-control" placeholder="验证码">
                    <%--在表单提交前进行简单的客户端验证（如检查用户名和密码是否为空）。--%>
                    <%--提供了验证码图片的刷新功能，通过 refresh() 函数重新加载验证码图片。--%>
                    <img id="img_validation_code"
                         src="AuthServlet?action=validationCode"
                         onclick="refresh()" style="height: 34px; width: 60px; cursor: pointer;">
                </div>
            </div>


            <div class="loginBtn">
                <button type="submit" class="btn btn-primary">登录</button>
            </div>
            <div class="text-center" style="margin-top: 20px;">
                <a href="register.jsp">注册</a>
            </div>
        </form>
    </div>
</div>
</body>
<script type="text/javascript">
    //提交之前进行检查，如果return false，则不允许提交
    function check() {
        //根据ID获取值
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        if (username == "") {
            alert("用户名不能为空!");
            return false;
        }
        if (password == "") {
            alert("密码不能为空!");
            return false;
        }
        return true;
    }
    function refresh() {
        let img = document.getElementById("img_validation_code")
        img.src = "AuthServlet?action=validationCode&r=" + Math.random();
    }
</script>
</html>